<template>
	<view class="page-bg">
		<view class="page-wallet" @click="finance('sid',sid)">
			<view class="wallet-name text-dark">{{user.wallet_name}} (ID:{{user.uid}})</view>
			<view class="wallet-info">
				<view class="assets text-highlight">SID总资产</view>
				<view class="assets-value text-highlight">{{sid}}</view>
			</view>
		</view>
		<view class="other-assets">
			<view class="item" @click="finance('usdt',usdt)">
				<view class="base-info">
					<view class="token-logo">
						<image src="../../static/icon/usdt-logo-300.png" mode="widthFix"></image>
					</view>
					<view class="token-info">
						<view class="symbol">USDT</view>
						<view class="amount-usdt text-dark">≈${{usdt}}</view>
					</view>
				</view>
				<view class="amount">
					<view class="user-amount text-highlight">{{usdt}}</view>
					<view class="user-amount-usd text-dark">≈{{usdt}} USD</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "@/utils/api/wallet/index.js"
	import util from '@/common/util.js'
	export default {
		data() {
			return {
				user: null,
				usdt: 0,
				sid: 0,
			}
		},
		onLoad() {
			this.user = uni.getStorageSync("user")
			console.log(this.user);

		},
		onShow() {
			this.getAccount();
		},
		methods: {
			async getAccount() {
				let res = await api.getAccount();
				if (res.status == 1) {
					this.usdt = res.data.usdt;
					this.sid = res.data.sid;
				}
			},
			finance(symbol, amount) {
				uni.navigateTo({
					url: "finance/finance?symbol=" + symbol + "&amount=" + amount
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.page-bg {
		background-image: url(../../static/background/pool_bg.png);
		height: 100%;
	}

	view {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	.page-wallet {
		margin: 15px;
		padding: 15px 30px;
		border-radius: 12px;
		background-image: url(../../static/background/asset_main_bg.png);
		background-size: cover;
		overflow: hidden;

		.assets-value {
			font-size: 26px;
			font-weight: bold;
		}
	}

	.other-assets {
		.item {
			flex-direction: row;
			justify-content: space-between;
			padding: 15px 15px;
			margin: 0 15px;
			border-bottom: 1px solid #333;

			.symbol,
			.user-amount {
				line-height: 120%;
			}

			.base-info {
				flex-direction: row;

				.token-logo {
					width: 45px;
					margin-right: 10px;

					image {
						width: 100%;
					}
				}

			}

			.amount {
				.user-amount {
					text-align: right;
				}

				.user-amount-usd {
					text-align: right;
				}
			}
		}
	}
</style>
